<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <div class="form-item-container">
        <p class="p">*</p>
        <van-field
            v-model="userAccount"
            name="userAccount"
            left-icon="user-o"
            placeholder="   请输入账号"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
      </div>

      <div class="form-item-container">
        <p class="p">  </p>
        <van-field
            v-model="username"
            name="username"
            left-icon="edit"
            placeholder="   请输入用户昵称"
            :rules="[{ required: false, message: '请填写用户昵称' }]"
        />
      </div>

      <div class="form-item-container">
        <p class="p">*</p>
        <van-field
            v-model="phone"
            name="phone"
            left-icon="phone-o"
            placeholder="   请输入手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
        />
      </div>

      <div class="form-item-container">
        <p class="p">*</p>
        <van-field
            v-model="email"
            name="email"
            left-icon="envelop-o"
            placeholder="   请输入邮箱"
            :rules="[{ required: true, message: '请填写邮箱' }]"
        />
      </div>

      <div class="form-item-container">
        <p class="p">*</p>
        <svg-icon icon-name="icon-mima" class="icon"></svg-icon>
        <van-field class="field"
                   v-model="userPassword"
                   type="password"
                   name="userPassword"
                   placeholder="请输入密码"
                   :rules="[{ required: true, message: '请填写密码' }]"
        />
      </div>

      <div class="form-item-container">
        <p class="p">*</p>
        <svg-icon icon-name="icon-mima" class="icon"></svg-icon>
        <van-field
            v-model="checkPassword"
            type="password"
            name="checkPassword"
            placeholder="请再次确认密码"
            :rules="[{ required: true, message: '请填写确认密码' }]"
        />
      </div>


      <van-radio-group v-model="gender" direction="horizontal" icon-size="16px" >
        <van-radio class="radio-label" name="1">♂</van-radio>
        <van-radio class="radio-label" name="0">♀</van-radio>
      </van-radio-group>
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
  <van-cell title="已注册？去用户登录" is-link to="/user/login"/>
  <van-cell title="已注册？去管理员登录" is-link to="/admin/login"/>
</template>

<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import myAxios from "../plugins/myAxios";
import {Toast} from "vant";

const router = useRouter();
const route = useRoute();

const userAccount = ref('');
const userPassword = ref('');
const checkPassword=ref('');
const phone=ref('');
const email=ref('');
const username=ref('');
const gender=ref();
const onSubmit = async () => {
  const res = await myAxios.post('/user/register', {
    userAccount: userAccount.value,
    userPassword: userPassword.value,
    checkPassword: checkPassword.value,
    phone: phone.value,
    email: email.value,
    username: username.value,
    gender: gender.value,
  })
  console.log(res, '用户注册');
  if (res.code === 0 && res.data) {
    Toast.success('注册成功');
    // 跳转到之前的页面
    const redirectUrl = route.query?.redirect as string ?? '/user/login';
    window.location.href = redirectUrl;
  } else {
    Toast.fail('注册失败');
  }
};

</script>

<style scoped>
.form-item-container {
  display: flex;
  align-items: center; /* 使图标和输入框垂直居中对齐 */
}
.icon {
  margin-left: 15px; /* 添加左右间距，根据需求调整 */
}
.field {
  flex-grow: 1; /* 让输入框占据剩余空间 */
}

.radio-label{
  font-weight: bold;
  font-size: 1.2em;
  margin-left: 30px;
  margin-top: 12px;
}
.p{
  margin-left: 10px;
  color: #ee0a24;
  font-size: 1.2em;
}
.toLogin{
  margin-left: 15px;
  color: #0bc15f;
  font-size: 0.9em;
}

</style>
